<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>系统参数配置 - 废物回收管理系统</title>
    <div th:replace="~{common/common :: header}"></div>
    <style>
        .config-type {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            color: white;
        }
        .config-type.text { background-color: #409EFF; }
        .config-type.number { background-color: #67C23A; }
        .config-type.boolean { background-color: #E6A23C; }
        .config-type.json { background-color: #F56C6C; }
        
        .config-status {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
        .config-status.enabled { 
            background-color: #f0f9eb;
            color: #67C23A;
        }
        .config-status.disabled { 
            background-color: #fef0f0;
            color: #F56C6C;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <!-- 标题栏 -->
        <div class="row mb-3">
            <div class="col">
                <h4>系统参数配置</h4>
            </div>
            <div class="col-auto">
                <a href="/config/create" class="btn btn-primary">
                    <i class="fas fa-plus"></i> 新增配置
                </a>
            </div>
        </div>
        
        <!-- 搜索表单 -->
        <div class="card mb-3">
            <div class="card-body">
                <form id="searchForm" class="row g-3">
                    <div class="col-md-3">
                        <input type="text" class="form-control" name="name" placeholder="配置名称">
                    </div>
                    <div class="col-md-3">
                        <input type="text" class="form-control" name="configKey" placeholder="配置键名">
                    </div>
                    <div class="col-md-2">
                        <select class="form-select" name="type">
                            <option value="">所有类型</option>
                            <option value="TEXT">文本</option>
                            <option value="NUMBER">数字</option>
                            <option value="BOOLEAN">布尔</option>
                            <option value="JSON">JSON</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <select class="form-select" name="status">
                            <option value="">所有状态</option>
                            <option value="1">启用</option>
                            <option value="0">禁用</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="fas fa-search"></i> 搜索
                        </button>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- 配置列表 -->
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>配置名称</th>
                                <th>配置键名</th>
                                <th>配置键值</th>
                                <th>配置类型</th>
                                <th>系统内置</th>
                                <th>状态</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="configList">
                            <tr th:each="config : ${configs}">
                                <td>
                                    <span th:text="${config.name}"></span>
                                    <small class="text-muted d-block" th:if="${config.remark}" th:text="${config.remark}"></small>
                                </td>
                                <td th:text="${config.configKey}"></td>
                                <td th:text="${config.configValue}"></td>
                                <td>
                                    <span class="config-type" th:classappend="${config.type.toLowerCase()}" 
                                          th:text="${config.type == 'TEXT' ? '文本' : 
                                                   config.type == 'NUMBER' ? '数字' :
                                                   config.type == 'BOOLEAN' ? '布尔' : 'JSON'}">
                                    </span>
                                </td>
                                <td>
                                    <span th:text="${config.isSystem == 1 ? '是' : '否'}"></span>
                                </td>
                                <td>
                                    <span class="config-status" th:classappend="${config.status == 1 ? 'enabled' : 'disabled'}"
                                          th:text="${config.status == 1 ? '启用' : '禁用'}">
                                    </span>
                                </td>
                                <td th:text="${#temporals.format(config.createTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
                                <td>
                                    <div class="btn-group btn-group-sm">
                                        <a th:href="@{/config/edit/{id}(id=${config.id})}" class="btn btn-primary" 
                                           th:if="${config.isSystem != 1}">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <button type="button" class="btn btn-success" th:if="${config.isSystem != 1}"
                                                th:onclick="'toggleStatus(' + ${config.id} + ',' + ${config.status == 1 ? 0 : 1} + ')'">
                                            <i class="fas fa-toggle-on" th:if="${config.status == 0}"></i>
                                            <i class="fas fa-toggle-off" th:if="${config.status == 1}"></i>
                                        </button>
                                        <button type="button" class="btn btn-danger" th:if="${config.isSystem != 1}"
                                                th:onclick="'deleteConfig(' + ${config.id} + ')'">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script th:inline="javascript">
    // 搜索配置
    $('#searchForm').submit(function(e) {
        e.preventDefault();
        const formData = {};
        $(this).serializeArray().forEach(item => {
            if (item.value) formData[item.name] = item.value;
        });
        
        fetch('/config/search?' + new URLSearchParams(formData))
            .then(response => response.json())
            .then(data => {
                // 清空并重新渲染列表
                $('#configList').empty();
                data.forEach(config => {
                    $('#configList').append(createConfigRow(config));
                });
            })
            .catch(error => {
                showError('搜索配置失败: ' + error.message);
            });
    });
    
    // 切换状态
    function toggleStatus(id, status) {
        fetch(`/config/${id}/status?status=${status}`, {
            method: 'PUT'
        })
        .then(response => response.json())
        .then(success => {
            if (success) {
                showSuccess('更新状态成功');
                setTimeout(() => location.reload(), 1000);
            } else {
                showError('更新状态失败');
            }
        })
        .catch(error => {
            showError('更新状态失败: ' + error.message);
        });
    }
    
    // 删除配置
    function deleteConfig(id) {
        if (!confirm('确定要删除该配置吗？')) {
            return;
        }
        
        fetch(`/config/${id}`, {
            method: 'DELETE'
        })
        .then(response => response.json())
        .then(success => {
            if (success) {
                showSuccess('删除成功');
                setTimeout(() => location.reload(), 1000);
            } else {
                showError('删除失败');
            }
        })
        .catch(error => {
            showError('删除失败: ' + error.message);
        });
    }
    
    // 创建配置行HTML
    function createConfigRow(config) {
        const typeText = {
            'TEXT': '文本',
            'NUMBER': '数字',
            'BOOLEAN': '布尔',
            'JSON': 'JSON'
        };
        
        return `
            <tr>
                <td>
                    <span>${config.name}</span>
                    ${config.remark ? `<small class="text-muted d-block">${config.remark}</small>` : ''}
                </td>
                <td>${config.configKey}</td>
                <td>${config.configValue}</td>
                <td>
                    <span class="config-type ${config.type.toLowerCase()}">${typeText[config.type]}</span>
                </td>
                <td>${config.isSystem == 1 ? '是' : '否'}</td>
                <td>
                    <span class="config-status ${config.status == 1 ? 'enabled' : 'disabled'}">
                        ${config.status == 1 ? '启用' : '禁用'}
                    </span>
                </td>
                <td>${new Date(config.createTime).toLocaleString()}</td>
                <td>
                    <div class="btn-group btn-group-sm">
                        ${config.isSystem != 1 ? `
                            <a href="/config/edit/${config.id}" class="btn btn-primary">
                                <i class="fas fa-edit"></i>
                            </a>
                            <button type="button" class="btn btn-success" 
                                    onclick="toggleStatus(${config.id}, ${config.status == 1 ? 0 : 1})">
                                <i class="fas fa-toggle-${config.status == 1 ? 'off' : 'on'}"></i>
                            </button>
                            <button type="button" class="btn btn-danger" 
                                    onclick="deleteConfig(${config.id})">
                                <i class="fas fa-trash"></i>
                            </button>
                        ` : ''}
                    </div>
                </td>
            </tr>
        `;
    }
    </script>
</body>
</html> 